<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .head {
        height: 100px;
    }

    .head .logo {
        margin-left: 60px;
    }

    .head .logo img {
        float: left;
        height: 36px;
    }

    .head .logo em {
        float: left;
        margin: 10px 10px;
        width: 1px;
        height: 18px;
        background-color: #000;
    }

    .nav ul {
        width: 40px;
        float: left;
    }

    .nav li {
        list-style: none;
        padding: 1%;
    }

    .nav li>a {
        text-decoration: none;
        color: black;
    }

    .head input {
        border-radius: 30px;
    }
</style>

<body>
    <div class="head">
        <div class="logo">
            <img src="../image/logo2.png" alt="">
            <em></em>
            <img src="../image/logo1.png" alt="">
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">手机</a></li>
                <li><a href="#">手表手环</a></li>
                <li><a href="#">耳机音箱</a></li>
                <li><a href="#">智慧屏</a></li>
                <li><a href="#">笔记本/平板</a></li>
                <li><a href="#">华为智选</a></li>
                <li><a href="#">企业购</a></li>
            </ul>
        </div>
        <input type="text" class="text" maxlength="100" value="HUAWEI P40">
        <input type="submit" name="" value="搜索" class="button">
    </div>
    <div class="main"></div>
    <div class="footer"></div>
</body>
<script>

</script>

</html>